<div id="fileServer">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <!--<div class="col-xs-1 navbar-form">-->
      <!--<div class="btn-group" role="group" aria-label="...">-->
      <!--<div type="button" class="btn btn-default">-->
      <!--<span class="glyphicon glyphicon-arrow-left"></span>-->
      <!--</div>-->
      <!--<div type="button" class="btn btn-default">-->
      <!--<span class="glyphicon glyphicon-arrow-right"></span>-->
      <!--</div>-->
      <!--</div>-->
      <div class="btn-group">
        <div class="btn btn-default" ng-model="radioModel" uib-btn-radio="'view-icons'" title="图标">
          <span class="glyphicon glyphicon-th"></span>
        </div>
        <div class="btn btn-default" ng-model="radioModel" uib-btn-radio="'view-details'" title="列表">
          <span class="glyphicon glyphicon-th-list"></span>
        </div>
      </div>
      <div class="btn btn-default" data-ng-click="multDownload()">
        <span class="glyphicon glyphicon-save"></span>
      </div>
      <div class="btn btn-default" data-ng-click="upload()">
        <span class="glyphicon glyphicon-open"></span>
      </div>
      <div class="btn btn-default" data-ng-click="multDelete()">
        <span class="glyphicon glyphicon-trash"></span>
      </div>
    </div>
  </nav>
  <uib-progressbar class="if-animation" id="progressbar" max="progressBar.max" value="progressBar.value" data-ng-show="progressBar.isShow"></uib-progressbar>
  <div class="col-xs-3 col-md-3 file-list">
    <z-tree async-url="rest/getFileDir" async-type="get" async-filter="true"></z-tree>
  </div>
  <div class="col-xs-9 col-md-9 file-view">
    <div class="row" data-ng-click="clearSelected()">
      <div id="view" class="view-icons">
        <div class="header">
          <a class="label ascending">
            <span class="l10n-name">Name</span>
          </a>
          <a class="date">
            <span class="l10n-lastModified">Last modified</span>
          </a>
          <a class="size">
            <span class="l10n-size">Size</span>
          </a>
        </div>
        <ul id="items" class="clearfix">
          <li class="item file go-back" data-ng-if="!!back.id" data-ng-click="goBack($event)">
            <span class="icon square">
              <span class="fa fa-arrow-left"></span>
            </span>
            <span class="icon landscape">
              <span class="fa fa-arrow-left"></span>
            </span>
            <span class="label" title="{{back.name}}">{{back.name}}</span>
            <span class="date"></span>
            <span class="size"></span>
          </li>
          <li class="item file" data-ng-class="{'selected': item.selected}" data-ng-repeat="item in fileItems track by item.id" ng-click="itemOnClick(item, $event)">
            <span class="icon square">
              <span class="fa {{::item.icon}}"></span>
            </span>
            <span class="icon landscape">
              <span class="fa {{::item.icon}} fa-2"></span>
            </span>
            <span class="label" title="{{::item.name}}">{{::item.name}}</span>
            <span class="date">{{::item.lastModifiedTime| lastModified}}</span>
            <span class="size">{{::item.size| fileSize}}</span>
            <span class="selector" data-ng-click="selectItem(item, $event)">
              <span class="glyphicon glyphicon-ok"></span>
            </span>
          </li>
        </ul>
        <div id="view-hint" class="l10n-empty" style="display: none;">empty</div>
      </div>
    </div>
  </div>
</div>
<script type="text/ng-template" id="fileUploader.html">
  <div class="modal-header">
    <h3 class="modal-title">文件上传</h3>
  </div>
  <div class="modal-body">
    <div class="row">
      <div class="col-md-3">
        <h3>选择文件</h3>
        <br/>
        <div class="input-group">
          <label for="fileInput">手动选择</label>
          <input type="file" id="fileInput" nv-file-select="" uploader="uploader" multiple/>
        </div>
      </div>
      <div class="col-md-9" style="margin-bottom: 40px">
        <h3>上传队列</h3>
        <p>当前队列中的文件数: {{ uploader.queue.length }}</p>
        <table class="table">
          <thead>
          <tr>
            <th width="30%">文件名</th>
            <th ng-show="uploader.isHTML5">大小</th>
            <th width="20%" ng-show="uploader.isHTML5">进度</th>
            <th width="10%">状态</th>
            <th width="20%">马上开始!</th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="item in uploader.queue">
            <td style="word-break: break-all;word-wrap: break-word;"><strong>{{ item.file.name }}</strong></td>
            <td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
            <td ng-show="uploader.isHTML5">
              <div class="progress" style="margin-bottom: 0;">
                <div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
              </div>
            </td>
            <td class="text-center">
              <span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
              <span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
              <span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
            </td>
            <td nowrap>
              <button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
                <span class="glyphicon glyphicon-upload"></span> 上传
              </button>
              <button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
                <span class="glyphicon glyphicon-ban-circle"></span> 取消
              </button>
              <button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
                <span class="glyphicon glyphicon-trash"></span> 移除
              </button>
            </td>
          </tr>
          </tbody>
        </table>
        <div>
          <div>
            队列进度：
            <div class="progress" style="">
              <div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }"></div>
            </div>
          </div>
          <button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()" ng-disabled="!uploader.getNotUploadedItems().length">
            <span class="glyphicon glyphicon-upload"></span> 全部上传
          </button>
          <button type="button" class="btn btn-warning btn-s" ng-click="uploader.cancelAll()" ng-disabled="!uploader.isUploading">
            <span class="glyphicon glyphicon-ban-circle"></span> 全部取消
          </button>
          <button type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()" ng-disabled="!uploader.queue.length">
            <span class="glyphicon glyphicon-trash"></span> 全部移除
          </button>
        </div>
      </div>
    </div>
    <div class="container-fluid" style="text-align: center">
      <button class="btn btn-warning btn-s" data-ng-click="cancel()">返回</button>
    </div>
  </div>
</script>